<template>
  <q-dialog class="add-edit-station-dialog dialog" v-model="show" persistent>
    <q-card style="min-width: 400px">
      <q-card-section class="dialog-title bg-primary">
        <div class="text-center text-white">{{state === 'add' ? '新增' : '编辑'}}</div>
      </q-card-section>
      <q-form @submit="submit" @reset="reset" greedy class="q-gutter-md dialog-content">
        <q-card-section>
          <div style="padding-bottom: 20px">
            <span class="text">字典组: {{ dictionaryGroup }}</span>
          </div>
          <q-input
            v-model="form.label"
            autofocus
            outlined
            dense
            :rules="[
                      val => val && val.length > 0 || '请输入内容'
                    ]">
            <template v-slot:before>
              <label class="text-right name">内容:</label>
            </template>
          </q-input>
          <q-input
            :disable="state === 'add' ? false : true"
            v-model="form.value" outlined dense
                   :rules="[
                      val => val && val.length > 0 || '请输入值'
                    ]">
            <template v-slot:before>
              <label class="text-right name">值:</label>
            </template>
          </q-input>
          <div class="dialog-item flex items-start margin-b-20">
            <label class="text-right name radio-name">是否可用:</label>
            <div>
              <q-radio v-model="form.enable" :val="true" label="是" />
              <q-radio v-model="form.enable" :val="false" label="否" />
            </div>
          </div>
          <q-input outlined v-model="form.remark" type="textarea" counter autogrow maxlength="100">
            <template v-slot:before>
              <label class="text-right name">描述:</label>
            </template>
          </q-input>
        </q-card-section>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="取消" color="primary" @click="$emit('close')" class="q-mr-md"/>
          <q-btn unelevated label="确认" color="primary" type="submit" :loading="submitting"/>
        </div>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'add-edit-data-dict',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    },
    state: {
      type: String
    },
    dictionaryGroup: {
      type: String
    },
    dictionaryGroupCode: {
      type: String
    }
  },
  data () {
    return {
      submitting: false,
      form: {
        enable: true,
        gcode: this.dictionaryGroupCode,
        label: '',
        remark: '',
        value: '',
        id: ''
      }
    }
  },
  methods: {
    // 清空表单
    reset () {
      this.form.enable = true
      // this.form.gcode = ''
      this.form.label = ''
      this.form.remark = ''
      this.form.value = ''
    },

    // 提交表单
    submit () {
      this.$emit('submit', this.state, this.form)
    },

    // 编辑填充表单
    assignment (val) {
      this.form.enable = val.enableFlag
      this.form.label = val.label
      this.form.remark = val.remark
      this.form.value = val.value
      this.form.id = val.id
    }
  },
  watch: {
    dictionaryGroupCode (val) {
      this.form.gcode = val
    }
  }
}
</script>

<style scoped lang="stylus">
  .text {
    font-size 16px
    width 100px
    color #333
    margin-left 28px
    padding-bottom 20px
  }
  .dialog{
    .dialog-title{
      padding 12px 16px
      line-height 1
      font-size 18px
    }
    .dialog-content{
      .name{
        font-size 16px
        display inline-block
        width 80px
      }
    }
  }
</style>
